<template>
  <div class="home">
    <router-view />
    <div>
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000" class="home-swiper" lazy-render>
        <van-swipe-item v-for="banner in banners" :key="banner.id">
          <img
            :src="banner.imageUrl"
            :style="{ width: '100%', height: '100%' }"
          />
        </van-swipe-item>
      </van-swipe>

      <!-- tag 切换 -->
      <van-sticky :offset-top="43">
        <div class="tab">
          <div class="tab-list">
            <van-tabs v-model="active" swipeable>
              <van-tab
                v-for="category in categories"
                :title="category.name"
                :key="category.id"
              >
              </van-tab>
            </van-tabs>
          </div>
          <div class="tab-more"><van-icon name="apps-o" /></div>
        </div>
      </van-sticky>

      <!-- 爆款商品 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-card
          v-for="product in products"
          :key="product.id"
          :title="product.title"
          :thumb="product.image"
          @click-thumb="jumpToDetail(product.id)"
        >
          <template #desc>
            <div class="card-desc">{{ product.rankingTag }}</div>
          </template>
          <template #tags>
            <div>全天热卖 NO.{{ product.dataoke.dailyRanking }}</div>
            <div>
              <span>￥{{ product.price | money }}</span>
              <span>原价：{{ product.originPrice | money }}</span>
            </div>
          </template>
          <template #price>
            <van-tag
              v-if="product.couponValue"
              plain
              type="primary"
              color="#f00"
              >{{ product.couponValue }}</van-tag
            >
          </template>
          <template #num>
            <div
              class="product-num"
              :style="{
                width: '100px',
                display: 'flex',
                'justify-content': 'space-evenly',
                'align-items': 'center'
              }"
            >
              <div>{{ product.dataoke.monthSales | saleNum }}</div>
              <van-icon
                name="shopping-cart"
                color="#F00"
                size="18"
                @click="addToCart(product)"
              />
            </div>
          </template>
        </van-card>
      </van-list>
    </div>
  </div>
</template>

<script>
// 引入 封装的 API
import { getBanners, getBaokuan } from '@/api/home'
import { getCategories } from '@/api/category'
export default {
  name: 'Home',
  data() {
    return {
      active: 0, // 标签页激活项索引
      banners: [], // 轮播图数组
      categories: [], // 分类数据
      products: [], // 爆款商品数据
      loading: false, // 当前是否正在加载列表数据,vant 提供
      finished: false, // 所有列表数据是否加载完毕，vant 提供
      nextIndex: 0 // 列表数据加载时下一页数据起始索引
    }
  },
  created() {
    // 获取轮播图数据
    getBanners()
      .then((data) => {
        // console.log(data)
        // 更新数据
        this.banners = data.banners
      })
      .catch((err) => console.log('异常：', err))

    // 分类的数据
    getCategories()
      .then((res) => {
        // console.log(res)
        this.categories = res.list
      })
      .catch((err) => console.log('异常：', err))
  },
  // 局部定义过滤器
  filters: {
    saleNum(val) {
      // 销量格式化
      if (val >= 10000) {
        val = (val / 10000).toFixed(1) + '万'
      }
      return `月销量${val}`
    }
  },
  methods: {
    onLoad() {
      // vant 方法，加载数据触底加载
      // 加载爆款商品数据，并将下次加载的开始索引传递
      getBaokuan(this.nextIndex)
        .then((data) => {
          // 更新数据
          this.products.push(...data.list)
          this.nextIndex = data.nextIndex
          // console.log(data.list)
          // console(this.loading)

          // 更新列表中使用的变量
          this.loading = false // 更新完数据，改变加载状态
          this.finished = data.isEnd // 是否加载完数据
        })
        .catch((err) => console.log('异常：', err))
    },
    // tab 数据渲染

    // 跳转到详情页：编程式导航
    jumpToDetail(id) {
      //
      this.$router.push(`/detail?id=${id}`)
      console.log(id)
    },
    // 加入购物车
    addToCart(product) {
      console.log('加入购物车', product)
      const { id, title, image, price, qunTitle } = product
      // 当前选购商品
      const curr = {
        id,
        title,
        image,
        price,
        desc: qunTitle,
        amount: 1
      }
      // 保存到购物车数组中，通过提交 mutation 来保存
      this.$store.commit('add', curr)
    }
  }
}
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'iconfont'; /* Project id 2626983 */
  src: url('//at.alicdn.com/t/font_2626983_5u68mejemi7.woff2?t=1624608942860')
      format('woff2'),
    url('//at.alicdn.com/t/font_2626983_5u68mejemi7.woff?t=1624608942860')
      format('woff'),
    url('//at.alicdn.com/t/font_2626983_5u68mejemi7.ttf?t=1624608942860')
      format('truetype');
}
.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
// 轮播图
/deep/ .home-swiper {
  margin-top: 15px;
  width: 750px;
  height: 360px;
}
// tab 导航
.tab {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f2f2f2;

  // tab 宽度
  .tab-list {
    width: 90%;
  }

  /* 样式穿透 */
  /deep/.van-tabs__nav {
    background-color: #f2f2f2;
  }
  // 重置 item 左右外边距
  /deep/.van-tab {
    padding: 0;
    margin: 0 10px;
  }
  // 下划线
  /deep/.van-tabs__line {
    width: 56px;
  }

  // 更多按钮
  &-more {
    width: 8%;
    height: 100px;
    text-align: center;
    .van-icon {
      font-size: 18px;
      line-height: 100px;
      color: rgb(62, 17, 226);
    }
  }
}
</style>
